/*flex-direction 定义方向*/
/*主轴为水平方向，起点在左端*/
.flex-direction-row{
    flex-direction: row;
}
/*主轴为水平方向，起点在右端*/
.flex-direction-row-reverse{
    flex-direction: row-reverse;
}
/*主轴为垂直方向，起点在上沿*/
.flex-direction-column{
    flex-direction: column;
}
/*主轴为垂直方向，起点在下沿*/
.flex-direction-column-reverse{
    flex-direction: column-reverse;
}


/* flex-wrap 属性规定flex容器是单行或者多行*/
/*不换行*/
.flex-wrap-nowrap{
    flex-wrap: nowrap;
}
/*换行,第一行在上方*/
.flex-wrap-wrap{
    flex-wrap: wrap;
}
/*换行，第一行在下方*/
.flex-wrap-reverse{
    flex-wrap:wrap-reverse ;
}

/*justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式*/
/*右对齐*/
.justify-content-flex-end{
    justify-content: flex-end;
}
/*左对齐 默认值*/
.justify-content-flex-start{
    justify-content: flex-start;
}
/*两端对齐，项目之间的间隔相等*/
.justify-content-space-between{
    justify-content:space-between;
}
/*居中*/
.justify-content-center{
    justify-content:center;
}
/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍*/
.justify-content-space-around{
    justify-content:space-around;
}


/*多行*/
/*align-content定义了多根轴线的对齐方式(纵轴)，如果项目只有一根轴线，那么该属性将不起作用*/
/*与交叉轴的终点对齐*/
.align-content-flex-end{
    align-content: flex-end;
}
/*与交叉轴的起点对齐。*/
.align-content-flex-start{
    align-content: flex-start;
}
/*与交叉轴两端对齐，轴线之间的间隔平均分布。*/
.align-content-space-between{
    align-content:space-between;
}
/*与交叉轴的中点对齐*/
.align-content-center{
    align-content:center;
}
/*每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍*/
.align-content-space-around{
    align-content:space-around;
}
/*轴线占满整个交叉轴*/
.align-content-stretch{
    align-content: stretch;
}

/*单行*/
/*align-items:定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式*/
/*交叉轴的起点对齐*/
.align-items-flex-start{
    align-items: flex-start;
}
/*交叉轴的终点对齐*/
.align-items-flex-end{
    align-items: flex-end;
}
/*交叉轴的中点对齐*/
.align-items-center{
    align-items: center;
}
/*项目的第一行文字的基线对齐*/
.align-items-baseline{
    align-items: baseline;
}
/*如果项目未设置高度或设为auto，将占满整个容器的高度。*/
.align-items-stretch{
    align-items: stretch;
}
